<template>
	<el-dialog title="绑定" v-model="visible" :width="1000" destroy-on-close style="center" @closed="$emit('closed')">
			<el-form ref="ruleForm" :model="form" :rules="rules">
				<!-- <el-form-item label="" prop="title">
					<el-input v-model="form.title"></el-input>
				</el-form-item> -->
				<el-form-item prop="list">
					<sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
						<!-- <sc-form-table ref="table" v-model="form.list" :addTemplate="addTemplate" drag-sort placeholder="暂无数据"> -->
						<el-table-column prop="device_id" label="网关" width="180">
							<template #default="scope">
								<el-input v-model="scope.row.device.name"  disabled placeholder="请输入内容"></el-input>
							</template>	
						</el-table-column>

						<el-table-column prop="address" label="地址码" width="180">
							<template #default="scope">
								<el-input v-model="scope.row.address" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>

						<el-table-column prop="model_id" label="传感器" min-width="180">
							<template #default="scope">
								<el-select v-model="scope.row.model_id" placeholder="请选择">
									<el-option v-for="item in modelDic" :key="item.id" :label="item.name" :value="item.id"></el-option>
								</el-select>
							</template>
						</el-table-column>

						<!-- <el-table-column prop="time" label="时间" width="180">
							<template #default="scope">
								<el-time-select v-model="scope.row.time"></el-time-select>
							</template>
						</el-table-column> -->

						<!-- <el-table-column prop="type" label="类型" width="180">
							<template #default="scope">
								<el-select v-model="scope.row.type" placeholder="请选择">
									<el-option v-for="item in typeDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</template>
						</el-table-column>
						
						<el-table-column prop="val" label="数量" min-width="180">
							<template #default="scope">
								<el-input v-model="scope.row.device_id" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column> -->
						
						<!-- <el-table-column prop="open" label="checked" width="85" align="center">
							<template #default="scope">
								<el-checkbox v-model="scope.row.checked"></el-checkbox>
							</template>
						</el-table-column>
						<el-table-column prop="open" label="开关" width="80" align="center">
							<template #default="scope">
								<el-switch v-model="scope.row.open"></el-switch>
							</template>
						</el-table-column> -->
						<el-table-column label="操作" width="240">
							<template #default="scope">
								<el-button  type="primary" @click="submitForm(scope.row)">保存</el-button>
								<el-button  type="danger" @click="del(scope.row)">删除传感器</el-button>
				    			<!-- <el-button @click="resetForm">重置</el-button> -->
							</template>
						</el-table-column>
					</sc-form-table>
				</el-form-item>
			</el-form>
		
		
			<!-- <el-button type="primary" @click="pushRow">外部插入行</el-button>
			<el-button type="primary" @click="deleteRow">外部删除第一行</el-button> -->
		
			<!-- <template #footer>
				<el-button @click="visible=false" >取 消</el-button>
				<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
			</template> -->
	</el-dialog>
</template>

<script>
	export default {
		name: 'formtable',
		emits: ['success', 'closed'],
		data(){
			return {
				Device_id: 0,
				Device_name: '',
				visible: false,
				// addTemplate: {
				// 	time: '',
				// 	type: '',
				// 	val: '',
				// 	open: true,
				// 	checked: false
				// },
				addTemplate: {
					device: { // 不加这样的数据，会报错
						name: ''
					},
					device_id: '',
					address: '',
					model_id: ''
				},
				form: {
					//title: "绑定",
					// list: [
					// 	{
					// 		time: '09:00',
					// 		type: '1',
					// 		val: '100',
					// 		open: true,
					// 		checked: true
					// 	},
					// 	{
					// 		time: '10:00',
					// 		type: '0',
					// 		val: '50',
					// 		open: false,
					// 		checked: true
					// 	}
					// ]
					list: [
							
					]
				},
				modelDic: [

				],
				// typeDic: [
				// 	{
				// 		label: "全局",
				// 		value: "0"
				// 	},
				// 	{
				// 		label: "局部",
				// 		value: "1"
				// 	}
				// ],
				rules: {
					title: [
						{required: true, message: '请上传', trigger: 'blur'}
					],
				}
			}
		},
		mounted() {
			
		},
		methods: {
			async getDeviceBinds()
			{
				let param = {'pageSize' : 255, 'device_id': this.Device_id};
				var res = await this.$API.devicebinds.list.get(param);
				if(res.code == 200){
					//console.log(res.data.rows)
					this.form.list = res.data.rows
				}
			},
			async getDeviceModels()
			{
				let param = {'pageSize' : 255};
				var res = await this.$API.model.list.get(param);
				if(res.code == 200){
					//console.log(res.data.rows)
					this.modelDic = res.data.rows
				}
			},
			//表单提交方法
			// async submit(){
			// 	var valid = await this.$refs.ruleForm.validate().catch(() => {})
			// 	if(!valid){
			// 		return false
			// 	}
			// 	this.isSaveing = true;
			// 	var res = await this.$API.device.add.post(this.form);
			// 	this.isSaveing = false;
			// 	if(res.code == 200){
			// 		if(this.mode=='add'){
			// 			this.form.id = res.data
			// 		}
			// 		this.$emit('success', this.form, this.mode)
			// 		this.visible = false;
			// 		this.$message.success("操作成功")
			// 	}else{
			// 		this.$alert(res.message, "提示", {type: 'error'})
			// 	}
			// },
			
			//显示
			open(Row){
				this.Device_id = Row.id;
				this.Device_name = Row.name;
				this.addTemplate.device.name = this.Device_name; 
				this.addTemplate.device_id = this.Device_id;
				this.visible = true;
				this.getDeviceBinds() // 获取所有绑定设备信息
				this.getDeviceModels() // 获取所有模型信息
				return this
			},

			async submitForm(row){
				var res = await this.$API.devicebinds.add.post(row);
				//this.isSaveing = false;
				if(res.code == 200){
					this.$emit('success')
					this.visible = false;
					this.$message.success("操作成功")
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
				// this.$refs.ruleForm.validate((valid) => {
				// 	if (valid) {
				// 		//alert('请看控制台输出');
				// 		//console.log(this.form);
				// 	}else{
				// 		return false;
				// 	}
				// })
			},
			async del(row){
				var res = await this.$API.devicebinds.delete.delete(row.id);
				//this.isSaveing = false;
				if(res.code == 200){
					this.$emit('success')
					this.visible = false;
					this.$message.success("操作成功")
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
				// this.$refs.ruleForm.validate((valid) => {
				// 	if (valid) {
				// 		//alert('请看控制台输出');
				// 		//console.log(this.form);
				// 	}else{
				// 		return false;
				// 	}
				// })
			},
			// resetForm(){
			// 	this.$refs.ruleForm.resetFields(); // 重置除之外的开始的数据之外的所有选中项
			// },
			// pushRow(){
			// 	const data = {
			// 		time: '18:00',
			// 		type: '1',
			// 		val: '0',
			// 		open: true,
			// 		checked: true
			// 	}
			// 	this.$refs.table.pushRow(data)
			// },
			// deleteRow(){
			// 	this.$refs.table.deleteRow(0)
			// }
		}
	}
</script>
